<template>
  <div
    style="
      width: 98%;
      height: 92%;
      margin: 0 auto;
      display: flex;
      overflow: hidden;
    "
  >
    <div
      style="width: 30%; max-height: 100%; overflow-y: scroll"
      class="xmmctree"
    >
      <el-tree
        :data="xmmctreedata"
        :props="defaultProps"
        accordion
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
    <div style="width: 70%; height: 100%">
      <div class="xzxmfourpopu">
        <div
          class="szjythirdshuzitop2"
          style="margin-right: 0.3rem; "
        >
          <el-input
            v-model="xzxmrwmctext"
            clearable
            placeholder="项目名称"
          ></el-input>
        </div>
        <div
          class="szjythirdshuzitop2"
          style="margin-right: 0.3rem; "
        >
          <el-input
            v-model="xzxmxmbhtext"
            clearable
            placeholder="项目编号"
          ></el-input>
        </div>
        <el-button 
          @click="xzxmsearch" 
          >搜索</el-button
        >
        <el-button 
          @click="xzxmsubmit" 
          >确定</el-button
        >
      </div>
      <div
        style="height: calc(100% - 90px)"
        class="xmmctablecheckbox"
        v-if="tableData.length >= 10"
      >
        <el-table
          :data="tableData"
          height="100%"
          ref="processDataTable"
          empty-text="--"
          style="width: 100%; background-color: transparent"
          :cell-style="{ fontSize: '1rem', textAlign: 'center' }"
          :header-cell-style="{
            textAlign: 'center',
            background: '#192c55',
            color: 'white',
          }"
          :row-class-name="tableRowClassName"
          @select="processSelectChange"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
        >
          <el-table-column type="index" label="序号" width="80">
            <template slot-scope="scope">
              <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            prop="title"
            label="项目名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="pageorgcode"
            label="项目编号"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="parentpath"
            label="所属组织"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="orgcode"
            label="所属组织编码"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <el-pagination
          background
          align="center"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total,prev,pager,next,jumper"
          :total="total1"
        >
        </el-pagination>
      </div>
      <div style="height: calc(100% - 90px)" class="xmmctablecheckbox1" v-else>
        <el-table
          :data="tableData"
          height="100%"
          ref="processDataTable"
          style="width: 100%; background-color: transparent"
          :cell-style="{ fontSize: '1rem', textAlign: 'center' }"
          :header-cell-style="{
            textAlign: 'center',
            background: '#192c55',
            color: 'white',
          }"
          :row-class-name="tableRowClassName"
          @select="processSelectChange"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
        >
          <el-table-column type="index" label="序号" width="80">
            <template slot-scope="scope">
              <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            prop="title"
            label="项目名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="pageorgcode"
            label="项目编号"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="parentpath"
            label="所属组织"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="orgcode"
            label="所属组织编码"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <el-pagination
          background
          align="center"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total,prev,pager,next,jumper"
          :total="total1"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
export default {
  components: {},
  props: {},
  data() {
    return {
      xzxmrwmctext: "",
      xzxmxmbhtext: "",
      processSelect: {},
      processSelect1: {},
      xmmctreedata: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      xmmcvisiable: false,
      xmmcpoptitle: "",
      pageNum: 1,
      pageSize: 10,
      total1: 1,
      tableData: [],
      xzxmobj: {},
      pageNum1: 1,
      controlthirdindex: 1,
      rowobj: {},
      prevdata: {},
    };
  },
  watch: {
    // xmmctext(newVal, oldVal) {
    //   if (!newVal) {
    //     this.xzxmobj = {};
    //   }
    //   this.controlthirdindex = 1;
    // },
  },
  mounted() {
    this.getxmmctreedata();
    this.gettableData({ orgCode: this.$store.state.orgCode });
    this.xmmcpoptitle = "选择项目";
  },
  methods: {
    xzxmsearch(prevdata) {
      this.pageNum = 1;
      let data = {};
      console.log(this.xzxmxmbhtext, this.xzxmrwmctext, 111);
      // if (prevdata) {
      //   data = this.prevdata;
      // } else {
      data = {
        orgName: this.xzxmrwmctext,
        projectCode: this.xzxmxmbhtext,
        // };
      };
      this.gettableData(data);
      this.prevdata = data;
    },
    handleCurrentChange(currentPage) {
      this.$refs.processDataTable.bodyWrapper.scrollTop = 0;
      this.pageNum = currentPage;
      this.gettableData(this.prevdata);
    },

    gettableData(data1) {
      let data = {};
      data = {
        ...data1,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orgCode: this.xzxmorgcode,
      };
      APIS.Baseapi.getPageOrg(data)
        .then((res) => {
          this.tableData = res.data.items;
          this.total1 = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getxmmctreedata() {
      APIS.Baseapi.getProjectOrgTree()
        .then((res) => {
          console.log(res, "res");
          this.xmmctreedata = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    processSelectChange(selection, row) {
      // 清除 所有勾选项
      this.$refs.processDataTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.processDataTable.toggleRowSelection(row, true);
      this.xzxmobj = row;
    },
    handleSelectionChange(val) {
      // this.processSelect = val;
      console.log(val, "val");
      // this.rowClick(val)
    },
    rowClick(row, column) {
      console.log(row, "row");
      const selectData = this.processSelect;
      this.$refs.processDataTable.clearSelection();
      if (selectData.length == 1) {
        selectData.forEach((item) => {
          // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
          if (item == row) {
            this.$refs.processDataTable.toggleRowSelection(row, false);
          }
          // 不然就让当前的一行勾选
          else {
            this.$refs.processDataTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.processDataTable.toggleRowSelection(row, true);
      }
      this.xzxmobj = row;
    },
    xzxmsubmit() {
      console.log(this.xzxmobj, "this.xzxmobj");
      this.$emit('xmmcevent', this.xzxmobj)
      // this.xmmctext = this.xzxmobj.title;
      // this.xmmcvisiable = false;
    },

    handleNodeClick(data) {
      this.pageNum = 1;
      this.xzxmorgcode = data.orgcode;
      this.gettableData();
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>
 
<style lang="scss">
.szjythirdshuzi {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  position: relative;

  .szjythirdshuzitop {
    width: 100%;
    height: 16%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    .szjythirdshuzitop1 {
      width: 22%;
      .el-input__inner {
        border: 1px solid #0000ff;
        background-color: transparent;
        color: #0000ff;
      }
      .el-input__suffix {
        top: 20%;
        font-size: 18px;
        color: #0000ff;
      }
      .el-input__inner::placeholder {
        color: #0000ff;
      }
    }
 
  }
}
.xzxmfourpopu {
  width: 100%;
  height:50px;
  display: flex;
  align-items: center;
  .szjythirdshuzitop1 {
    width: 22%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    .el-input__inner {
      border: 1px solid #0000ff;
      background-color: transparent;
      color: #0000ff;
    }
    .el-input__suffix {
      top: 20%;
      font-size: 18px;
      color: #0000ff;
    }
    .el-input__inner::placeholder {
      color: #0000ff;
    }
  }
  .el-button {
    background-color: #0000ff;
    color: white;
  }
}
.xmmctablecheckbox {
  .el-checkbox__inner {
    border-radius: 50%;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0000ff;
    border-color: #0000ff;
  }
  .el-table .el-table__cell {
    padding: 0.4rem 0;
  }
  .el-table__body {
    height: 100%;
  }
}
.xmmctablecheckbox1 {
  .el-checkbox__inner {
    border-radius: 50%;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0000ff;
    border-color: #0000ff;
  }
  .el-table .el-table__cell {
    padding: 0.4rem 0;
  }
}
 
</style> 